<!--
 * @Author: zhudunfeng 2101580047@qq.com
 * @Date: 2025-07-25 23:34:45
 * @LastEditors: zhudunfeng 2101580047@qq.com
 * @LastEditTime: 2025-08-03 22:28:20
 * @FilePath: \jptt-front\src\components\FilmItemList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import FilmItem from '@/components/FilmItem.vue'
import type { Film } from '@/types/types'
import FilmItemCreate from './FilmItemCreate.vue';

defineProps<{
  films: Film[]
}>()
</script>

<template>
  <div class="film-list">
    <!-- 视频栅格列表 -->
    <div class="video-grid">
      <div class="video-card-create video-card">
        <FilmItemCreate />
        <div class="film-item-create-btn-title">
          视频创建
        </div>
      </div>
      <div class="video-card" v-for="video in films" :key="video.id">
        <FilmItem :video="video" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 基础样式变量使用base.scss中的 - 仅保留Web端所需
@use '/src/assets/_variables.scss' as variables;

// 视频创建
.video-card-create {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.film-item-create {
  width: 100%;
  height: 100%;
  border-radius: variables.$radius;
  overflow: hidden;
  aspect-ratio: 2/3; // 标准竖屏比例
  box-shadow: variables.$shadow;
}

.film-item-create-btn-title {
  height: 30%;
  margin-top: 15px;
}

/* 视频栅格 - Web端优化*/
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 24px 16px;
  padding: 20px 0;
  max-width: variables.$container-max-width;
  margin: 0 auto;
}

// 视频卡片
.video-card {
  cursor: pointer;
  transition: transform 0.2s ease;

  &:hover {
    transform: translateY(-5px) scale(1.03);
  }
}
</style>